<template>
  <div class="dashboard-container">
    <div class="header">
      今日数据<i>{{ getday()[1] }}</i>
      <span><RouterLink to="statistics">详细数据</RouterLink></span>
    </div>
    <div class="box business">
      <div class="item">
        <p class="tit">营业额</p>
        <p class="num">¥ {{ props.business!.turnover }}</p>
      </div>
      <div class="item">
        <p class="tit">有效订单</p>
        <p class="num">{{ props.business!.validOrderCount }}</p>
      </div>
      <div class="item">
        <p class="tit">订单完成率</p>
        <p class="num"> {{ (props.business!.orderCompletionRate * 100).toFixed(0) }} % </p>
      </div>
      <div class="item">
        <p class="tit">平均客单价</p>
        <p class="num">¥ {{ props.business!.unitPrice }}</p>
      </div>
      <div class="item" v-if="userStore.rule === 'admin'">
        <p class="tit">新增用户</p>
        <p class="num">{{ props.operational!.newUsers }}</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores/userStore'
import { BusinessData, OperationalData } from '@/types/dashboard'
import { getday } from '@/utils/formValidate'
import { RouterLink } from 'vue-router'
const userStore = useUserStore()
const props = defineProps<{
  business?: BusinessData
  operational?: OperationalData
}>()
</script>
<style scoped lang="scss">
.business {
  .item {
    padding: 0 10px;
  }
}
</style>
